<!--此组件过时 不支持分片断点续传-->
<template>
  <p>
    <button @click="refresh">
      <i class="ace-icon fa fa-undo"></i>
      刷新
    </button>
  </p>
  <table id="simple-table" class="table  table-bordered table-hover">
    <thead>
      <tr>
          <th>id</th>
          <th>相对路径</th>
          <th>文件名</th>
          <th>后缀</th>
          <th>大小</th>
          <th>用途</th>
      </tr>
    </thead>

    <tbody>
    <tr v-for="file in files" :key="file.id">
          <td>{{ file.id }}</td>
          <td>{{ file.path }}</td>
          <td>{{ file.name }}</td>
          <td>{{ file.suffix }}</td>
          <td>{{ formatFileSize(file.size) }}</td>
          <td>{{ optionKV(FILE_USE_REF, file.use) }}</td>
    </tr>
    </tbody>
  </table>
  <!-- 分页插件 -->
  <pagination ref="paginationRef" :list="getFileList" />
</template>

<script>
import axios from "axios";
import {onMounted, ref} from "vue";
import pagination from "@/components/pagination";
import Filter from "@/filter/filter"

export default {
  name: "File",
  components: {
    pagination,
  },
  setup() {
    // files 数组
    const files = ref([]);
    const paginationRef = ref(null);

    // 枚举字段
    const FILE_USE_REF = ref();

    // 刷新
    const refresh = () => {
      getFileList(1);
    }

    // 获取文件列表
    const getFileList = (page) => {
      Loading.show();
      axios.post(process.env.VUE_APP_SERVER + "/file/admin/file/list",
          {
            page: page,
            size: paginationRef.value.size
          }
      ).then((response) => {
        Loading.hide();
        const resp = response.data;
        files.value = resp.content.list;
        paginationRef.value.render(page, resp.content.total);
      })
    }

    // 渲染收费字段 收费 状态 级别
    const optionKV = (object, key) => {
      return Filter.optionKV(object, key);
    }

    /**
     * 格式化文件大小
     */
    const formatFileSize = (size) => {
      return Filter.formatFileSize(size);
    }

    // 初始加载第一页
    onMounted(() => {
      getFileList(1);
      FILE_USE_REF.value = FILE_USE;
    })

    return {
      files,
      refresh,
      paginationRef,
      getFileList,
      FILE_USE_REF,
      optionKV,
      formatFileSize,
    }
  }
}
</script>

<style scoped>

</style>